import cpnstyles from './cpnstyles.less';

interface DataCardProp {
  reverse?: boolean;
  titleText: string;
  dom: React.ReactNode;
}

const DataCard = (props: DataCardProp) => {
  const { reverse = false, titleText, dom = <div>此处插入图表</div> } = props;
  return (
    <div className={cpnstyles.dataCard}>
      <svg
        width="415"
        height="249"
        style={{
          transform: reverse ? 'rotateY(180deg)' : 'rotateY(0deg)',
        }}
      >
        <filter id="inset-shadow">
          <feComponentTransfer in="SourceAlpha">
            <feFuncA type="table" tableValues="1 0" />
          </feComponentTransfer>
          <feGaussianBlur stdDeviation="10" />
          <feOffset dx="0" dy="1" result="offsetblur" />
          <feFlood floodColor="#4a8dc4" result="color" />
          <feComposite in2="offsetblur" operator="in" />
          <feComposite in2="SourceAlpha" operator="in" />
          <feMerge>
            <feMergeNode in="SourceGraphic" />
            <feMergeNode />
          </feMerge>
        </filter>
        <polyline
          points="3,48 3,16 18,1 42,1"
          stroke="#36d5f2"
          fill="transparent"
          strokeWidth="2"
        />
        <polygon
          points="0,55 10,46 10,16 19,7 296,7 305,17 395,17 404,27 404,72 415,82 415,214 405,224 405,233 395,242 20,242 10,233 10,196 0,186"
          style={{
            opacity: 0.4,
            fill: '#001f34',
            filter: 'url(#inset-shadow)',
          }}
        />
        <polygon
          points="0,55 10,46 10,16 19,7 296,7 305,17 395,17 404,27 404,72 415,82 415,214 405,224 405,233 395,242 20,242 10,233 10,196 0,186"
          style={{
            stroke: '#00bcde',
            fillOpacity: 0,
            strokeWidth: 1,
          }}
        />
        <polyline
          points="382,248 397,248 410,235 410,224"
          stroke="#36d5f2"
          fill="transparent"
          strokeWidth="2"
        />
        <polyline points="315,6 322,14" stroke="#32f8f7" fill="transparent" strokeWidth="3" />
        <polyline
          strokeLinecap="butt"
          points="324,6 331,14"
          stroke="#32f8f7"
          opacity={0.9}
          fill="transparent"
          strokeWidth="3"
        />
        <polyline
          points="333,6 340,14"
          stroke="#32f8f7"
          opacity={0.8}
          fill="transparent"
          strokeWidth="3"
        />
        <polyline
          points="342,6 349,14"
          stroke="#32f8f7"
          opacity={0.7}
          fill="transparent"
          strokeWidth="3"
        />
        <polyline
          points="351,6 358,14"
          stroke="#32f8f7"
          opacity={0.6}
          fill="transparent"
          strokeWidth="3"
        />
        <polyline
          points="360,6 367,14"
          stroke="#32f8f7"
          opacity={0.5}
          fill="transparent"
          strokeWidth="3"
        />
        <polyline
          points="369,6 376,14"
          stroke="#32f8f7"
          opacity={0.4}
          fill="transparent"
          strokeWidth="3"
        />
        <polyline
          points="378,6 385,14"
          stroke="#32f8f7"
          opacity={0.3}
          fill="transparent"
          strokeWidth="3"
        />
        <polyline
          points="386,6 393,14"
          stroke="#32f8f7"
          opacity={0.2}
          fill="transparent"
          strokeWidth="3"
        />
        <polyline
          points="395,6 402,14"
          stroke="#32f8f7"
          opacity={0.1}
          fill="transparent"
          strokeWidth="3"
        />
        <polyline points="31,46 47,46" stroke="#32f8f7" fill="transparent" strokeWidth="2" />
        <polyline points="47,46 384,46" stroke="#006d9d" fill="transparent" strokeWidth="2" />
      </svg>
      <div className={cpnstyles.dataBox}>
        <div className={reverse ? cpnstyles.dataHeaderRight : cpnstyles.dataHeaderLeft}>
          <i className={cpnstyles.arrow} /> {titleText}
        </div>
        <div className={cpnstyles.dataChart}>{dom}</div>
      </div>
    </div>
  );
};

export default DataCard;
